<template>
  <div class="appraise-info">
    <div
      class="appraise-item"
      v-for="(item, index) in appraiseInfo.list"
      :key="index"
    >
      <div class="user">
        <img class="avatar" :src="item.user.avatar" />
        <span class="uname">{{ item.user.uname }}</span>
        <span class="style">{{ item.style }}</span>
        <span class="time">{{
          (item.created * 1000) | timeFormat("YYYY-MM-DD HH:mm:ss")
        }}</span>
      </div>
      <div class="extra">
        <p v-for="extraItem in item.extraInfo" :key="extraItem">
          <span class="name"> {{ extraItem | nameSplit }}:</span>
          <span class="val"> {{ extraItem | valSplit }}</span>
        </p>
      </div>
      <div class="content" v-if="item.content">{{ item.content }}</div>
      <div class="images" v-if="item.images">
        <div class="images-item" v-for="imgItem in item.images" :key="imgItem">
          <img :src="imgItem" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import moment from "moment";

export default {
  name: "DetailAppraiseInfo",
  props: ["appraiseInfo"],
  filters: {
    nameSplit(val) {
      return val.split(":")[0];
    },
    valSplit(val) {
      return val.split(":")[1];
    },
    // timeFormat(val, format = "YYYY-MM-DD HH:mm:ss") {
    //   return moment(val * 1000).format(format);
    // },
  },
};
</script>

<style scoped  lang="less" >
.appraise-item {
  padding: 10px;
  font-size: 14px;
  border-bottom: 10px solid #eee;
}
.user {
  position: relative;
  height: 48px;
  .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
  }
  .uname {
    position: absolute;
    top: 0;
    left: 70px;
    height: 24px;
    line-height: 24px;
  }
  .style {
    position: absolute;
    top: 24px;
    left: 70px;
    height: 24px;
    line-height: 24px;
  }
  .time {
    position: absolute;
    right: 0;
    top: 24px;
  }
}
.extra {
  margin: 10px 0;
  .val {
    margin-left: 10px;
    color: #333;
    font-size: 16px;
  }
}
.images {
  display: flex;
  .images-item {
    position: relative;
    width: 32%;
    margin: 0.65%;
    padding-bottom: 32%;
    height: 0;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
</style>
